<template>
  <div class="product-detail">
    <div class="top-banner">
    	<div class="wraper">
    		<el-row type="flex" class="row-bg">
			  <el-col :span="12">
			    <div class="grid-content" style="text-align: center;">
			    	<img :src="prd.picUrl">
			    </div>
			  </el-col>
			  <el-col>
			  	<div class="grid-content pro-infos">
			  		<div class="title">{{prd.name}}</div>
			  		<div class="jiage clearfix">
			  			<div class="float-left">{{$t('product.detail.Original')}}</div>
			  			<div class="float-left price line-th">$ {{prd.highCents | formatNumber}}</div>
			  		</div>
			  		<div class="jiage clearfix">
			  			<div class="float-left">{{$t('product.detail.Current')}}</div>
			  			<div class="float-left price active">$0 <span>100% Cash Back</span></div>
			  		</div>
			  		<div class="txt hide"><span class="active" style="paddingRight: 5px;">889</span>{{$t('product.detail.txt')}}</div>
			  		<el-button type="warning" @click="shopNow">{{$t('product.detail.shop_now')}}</el-button>
			  	</div>
			  </el-col>
			  <el-col style="width: 250px;">
				  <div class="grid-content step-nav">
				  	<my-order-btn></my-order-btn>
					<div class="pr-detail-title">{{$t('product.detail.step1')}}</div>
				  	<div class="pr-detail-step">
						<p>Choose the applicable goods</p>
						<p>{{$t('product.detail.step2')}} ${{prd.highCents | formatNumber}} {{$t('product.detail.step3')}}</p>
						<p>{{$t('product.detail.step4')}}</p>
						<p>{{$t('product.detail.step5')}}${{prd.highCents | formatNumber}}{{$t('product.detail.step6')}}</p>
						<p><router-link to="/help" class="go-help">Learn more about how to request your cashback</router-link></p>
					</div>
				  </div>
				</el-col>
			</el-row>
    	</div>
    </div>
    <div class="descreption">
    	<div class="wraper">
			<div class="d-title">Description</div>
			<div class="d-content"><p>{{prd.description}}</p></div>
    	</div>		
	</div>
    <div class="content-banner">
    	<div class="wraper">
    		<div class="title">{{$t('product.detail.how')}}</div>
			<cash-back-steps></cash-back-steps>
			<div class="txt-steps">
				<p>{{$t('product.detail.paid_txt2')}}</p>
				<p>{{$t('product.detail.paid_txt3')}}</p>
				<p>{{$t('product.detail.paid_txt4')}}</p>
			</div>
    	</div>
    	<el-dialog
		  :title="$t('product.detail.dialog1')"
		  :visible.sync="couponDialogVisible"
		  center>
			<div class="dialog-coupon">
				<coupon-item v-for="item in couponList" :coupon="item" @getActiveId="getActiveId"></coupon-item>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="couponDialogVisible = false">{{$t('product.detail.dialog7')}}</el-button>
		    <el-button type="warning" @click="submitCoupon">{{$t('product.detail.dialog6')}}</el-button>
		  </span>
		</el-dialog>
    </div>
    <img src="../../../assets/ad.png" style="width: 100%;height:192px;" class="hide">
  </div>
</template>

<script>
import MyOrderBtn from '@/components/MyOrderBtn'
import couponItem from '../coupon/component/couponItem.vue';
import { getPrdDetail, getMyCoupons, submitOrder } from '@/api/c'
import CashBackSteps from './component/CashBackSteps'

export default {
  name: 'detail',
  components: { MyOrderBtn, couponItem, CashBackSteps },
  data() {
    return {
    	id: this.$route.params.id, //产品id
    	couponId: null,
    	orderNumber: 10,
    	couponDialogVisible: false,
    	prd: {}, //产品详情
    	couponList: [] //可用券列表
    }
  },
	methods: {
	  handleNodeClick(data) {
	    console.log(data);
	  },
	  getDetail() {
	  	getPrdDetail({prdId: this.id}).then(response => {
            this.prd = response.data
        })
	  },
	  shopNow() {
	  	getMyCoupons({prdId: this.id}).then(response => {
            this.couponList = response.data ? response.data : []
            if (this.couponList.length > 0) {
            	this.$nextTick(() => {
	            	this.couponDialogVisible = true;
	            })
            } else {
				window.location.href = '/?_='+new Date()*1+'#/product/mgm'
            }
        })
	  },
	  //获取所选券的Id
	  getActiveId(id) {
	  	this.couponId = id;
	  },
	  submitCoupon() {
	  	if (!this.couponId) {
	  		this.$message({
	          message: 'please choose one coupon',
	          type: 'warning'
	        });
	        return false;
	  	}
		submitOrder({cCouponId: this.couponId, prdId: this.id}).then(response => {
            this.$router.push({name: 'submitProduct', params: {orderId: response.data}})
        })
	  }
	},
	created() {
		this.getDetail()
	}
}
</script>

<style  scoped>
p {
	margin: 0;
}
li {
	list-style: none;
}
.dialog-coupon {
	width: 368px;
	margin: 0 auto;
	padding: 0;
}
.dialog-coupon .coupon-item {
	cursor: pointer;
	margin-bottom: 10px;
}
.top-banner {
	height: 360px;
	padding-top: 39px;
	background: #ffffff;
}
.grid-content img {
	height: 280px;
}
.line-th {
	text-decoration: line-through;
}
.pro-infos {
color: #333333;
padding: 25px 25px 0 25px;
font-size: 14px;
line-height: 1.2;
}
.pro-infos .jiage {
	margin-top: 12px;
}
.pro-infos img {
	width: 280px;
	height: 280px;
}
.pro-infos .title {
	font-size: 18px;
	margin-bottom: 34px;
}
.pro-infos .price {
	padding-left: 20px;
}
.pro-infos .price span {
	height: 20px;
	line-height: 20px;
	color: #ffffff;
	text-align: center;
	background: #3DBDB6;
	display: inline-block;
	border-radius: 10px;
	margin-left: 20px;
	vertical-align: middle;
	padding: 0 10px;
	font-size: 10px;
}
.pro-infos .active {
	color: #3DBDB6;
}
.pro-infos .txt {
	margin-top: 32px;
}
.pro-infos .el-button--warning {
	margin-top: 55px;
}
.pr-detail-step {
	width: 240px;
	height: 110px;
	background: url('../../../assets/step.png') no-repeat center left;
	background-size: contain;
	padding-left: 20px;
}
.pr-detail-title {
	font-size: 16px;
	color: #333333;
	margin: 80px 0 20px 0;
}
.pr-detail-step p {
	font-size: 14px;
	color: #333333;
	padding-bottom: 16px;
}
.pr-detail-step span {
	color: #3DBDB6;
}
.step-nav .my-order {
	top: 0;
	right: 40px;
}
.content-banner {
	background: #ffffff;
	padding: 40px 0 50px 0;
	text-align: center;
}
.content-banner .title {
	font-size: 18px;
	color: #333333;
}
.content-banner .el-steps {
	width: 800px;
	margin: 80px auto;
}
.txt-steps p {
	font-size: 16px;
	line-height: 34px;
	color: #333333;
}
.pr-detail-step .go-help {
	color: #3DBDB6;
}
.txt-steps p:nth-of-type(3) {
	font-size: 18px;
	color: #72808E;
	margin-top: 10px;
}
.descreption {
	background: #FAFBFC;
	border-top: 1px solid #EBEDF8;
	border-bottom: 1px solid #EBEDF8;
	padding: 45px 0;
}
.descreption .wraper {
	width: 860px;
}
.descreption .d-title {
	font-size: 18px;
	text-align: center;
	margin-bottom: 20px;
}
.descreption .d-content p{
	font-size: 16px;
	line-height: 34px;
	color: #333333;
	text-align: justify;
}
</style>
<style type="text/css">
.product-detail .el-button--warning {
	background: #FFB73E;
	border-color: #FFB73E;
}
.el-step__line {
	border-color: #E8EBED;
}
.product-detail .content-banner .el-step__icon.is-icon {
	background: #ffffff;
}
</style>
